<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <!--
        /**
        * o------------------------------------------------------------------------------o
        * | This file is part of the RGraph package - you can learn more at:             |
        * |                                                                              |
        * |                          http://www.rgraph.net                               |
        * |                                                                              |
        * | This package is licensed under the RGraph license. For all kinds of business |
        * | purposes there is a small one-time licensing fee to pay and for non          |
        * | commercial  purposes it is free to use. You can read the full license here:  |
        * |                                                                              |
        * |                      http://www.rgraph.net/LICENSE.txt                       |
        * o------------------------------------------------------------------------------o
        */
    -->

    <title>RGraph: Javascript charts library - A basic example of a combined Bar/Line chart</title>
    
    <meta name="keywords" content="rgraph javascript charts html5 canvas basic example  f a combined Bar/Line chart" />
    <meta name="description" content="RGraph: Javascript charts library -  A basic example of a combined Bar/Line chart" />

    <!-- Include the RGraph libraries -->
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->

</head>

<body>

    <h1>RGraph: <span>Javascript charts library</span> - A basic example of a combined Bar/Line chart</h1>

    <!-- The canvas on to which the chart is drawn -->
    <canvas id="cvs" width="1000" height="250" !style="border: 1px solid gray">[No canvas support]</canvas>

    <!-- The Javascript code that creates the chart -->
    <script>
        window.onload = function ()
        {
            /**
            * The order in which you create the charts is important - the Line chart must be last
            */
            var bar  = new RGraph.Bar('cvs', [143,140,141,135,136,132,129,125,126,127,127,129]);
            var line = new RGraph.Line('cvs', [23,25,25,26,27,26,28,28,28,27,29,30]);

            /**
            * Some Line chart configuration
            */
            line.Set('chart.background.grid', false);
            line.Set('chart.noaxes', true);
            line.Set('chart.linewidth', 3);
            line.Set('chart.tickmarks', 'endcircle');
            line.Set('chart.yaxispos', 'right');
            line.Set('chart.ymax', 50);
            line.Set('chart.title', 'A combined Bar and Line chart');
            line.Set('chart.tooltips', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);

            /**
            * Some Bar chart configuration
            */
            bar.Set('chart.background.grid.autofit', true);
            bar.Set('chart.ymax', 250);
            bar.Set('chart.gutter.left', 50);
            bar.Set('chart.gutter.right', 5);
            bar.Set('chart.colors', ['BLUE']);
            bar.Set('chart.strokestyle', 'black');
            bar.Set('chart.linewidth', 3);
            bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
            bar.Set('chart.tooltips', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
            
            /**
            * Add the Line chart to the Bar chart
            */
            bar.Set('chart.line', line);
            
            /**
            * Now draw the Bar chart, which also causes the line chart to be drawn
            */
            bar.Draw();
        }
    </script>
    
    <p>
        This is an example of a Bar chart combined with a Line chart. The source code is documented to make it easier
        for you to copy and paste it if you wish.
    </p>

</body>
</html><!-- Social networking buttons -->
        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 140px; height: 20px">
            <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a>
            <a href="http://www.twitter.com/_RGraph" target="_blank" title="Follow _RGraph on Twitter"><img src="../images/twitter.png" alt="Follow _RGraph on Twitter"/></a>
            <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&amp;href=http%3A%2F%2Fwww.rgraph.net&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe>
        </div>
        
        <script>
            // Opera fix
            if (navigator.userAgent.indexOf('Opera') == -1) {
              document.getElementById("social_icons").style.position = 'fixed';
            }
        </script>
        
        <div id="google_plusone">
            <!-- Place this tag where you want the +1 button to render -->
            <g:plusone href="http://www.rgraph.net"></g:plusone>
        </div>
    